<template>
  <view class="detail-container">
    <!-- 顶部导航 -->
    <view class="detail-header">
      <view class="header-back" @click="navigateBack">
        <i class="fa fa-arrow-left"></i>
      </view>
      <view class="header-title">工单详情</view>
    </view>

    <!-- 内容区域 -->
    <scroll-view class="detail-content" scroll-y>
      <!-- 加载中 -->
      <view class="loading" v-if="isLoading">
        <view class="spinner"></view>
        <view class="loading-text">加载详情中...</view>
      </view>

      <!-- 错误状态 -->
      <view class="error-state" v-if="!isLoading && errorMsg">
        <i class="fa fa-exclamation-circle error-icon"></i>
        <view class="error-text">{{ errorMsg }}</view>
        <button class="retry-btn" @click="getWorkorderDetail">重新加载</button>
        <button class="back-btn" @click="navigateBack">返回列表</button>
      </view>

      <!-- 工单详情内容 -->
      <view v-if="!isLoading && !errorMsg">
        <!-- 工单标题和状态 -->
        <view class="detail-card">
          <view class="title-status-bar">
            <view class="detail-title">{{ workorderDetail.title || '无标题' }}</view>
            <view class="detail-status" :class="getStatusClass(workorderDetail.status)">
              <i class="fa fa-flag"></i> {{ getStatusText(workorderDetail.status) }}
            </view>
          </view>
          
          <!-- 工单图片 -->
          <view v-if="workorderDetail.pic" class="image-container">
            <image 
              class="workorder-image" 
              :src="imageBaseUrl + workorderDetail.pic" 
              mode="widthFix"
              @click="previewImage(imageBaseUrl + workorderDetail.pic)"
            ></image>
          </view>
          <view v-else class="no-image">
            <i class="fa fa-picture-o"></i>
            <text>暂无图片</text>
          </view>
        </view>

        <!-- 基本信息列表 -->
        <view class="detail-card">
          <view class="section-title">
            <i class="fa fa-info-circle"></i> 基本信息
          </view>
          <view class="info-grid">
            <view class="info-row">
              <view class="info-item">
                <view class="info-label">工单编号</view>
                <view class="info-value">{{ workorderDetail.id || '未知' }}</view>
              </view>
              <view class="info-item">
                <view class="info-label">提交人</view>
                <view class="info-value">{{ workorderDetail.name || '未知' }}</view>
              </view>
            </view>
            <view class="info-row">
              <view class="info-item">
                <view class="info-label">联系电话</view>
                <view class="info-value">{{ workorderDetail.phone || '未填写' }}</view>
              </view>
              <view class="info-item">
                <view class="info-label">处理人</view>
                <view class="info-value">{{ workorderDetail.employeeName || '未分配' }}</view>
              </view>
            </view>
            <view class="info-row">
              <view class="info-item full-width">
                <view class="info-label">服务地址</view>
                <view class="info-value">
                  <template v-if="resolvedAddress">
                    {{ resolvedAddress }}
                  </template>
                  <template v-else>
                    {{ workorderDetail.address || '未填写' }}
                  </template>
                </view>
              </view>
            </view>
            <view class="info-row">
              <view class="info-item">
                <view class="info-label">工单类型</view>
                <view class="info-value">{{ getTypeText(workorderDetail.type) }}</view>
              </view>
              <view class="info-item">
                <view class="info-label">紧急程度</view>
                <view class="info-value" :class="getUrgencyClass(workorderDetail.priorityType)">
                  {{ getUrgencyText(workorderDetail.priorityType) }}
                </view>
              </view>
            </view>
            <view class="info-row">
              <view class="info-item">
                <view class="info-label">创建时间</view>
                <view class="info-value">{{ formatTime(workorderDetail.createTime) }}</view>
              </view>
              <view class="info-item">
                <view class="info-label">更新时间</view>
                <view class="info-value">{{ formatTime(workorderDetail.updateTime) }}</view>
              </view>
            </view>
            
            <!-- 支付金额信息（仅已处理状态显示） -->
            <view class="info-row" v-if="workorderDetail.status === 2">
              <view class="info-item full-width">
                <view class="info-label">应付金额</view>
                <view class="info-value pay-amount">
                  ¥{{ (payAmount || 0).toFixed(2) }}
                  <button 
                    class="refresh-amount-btn" 
                    @click.stop="getPaymentAmount"
                    :loading="isCalculatingAmount"
                  >
                    <i class="fa fa-refresh"></i>
                  </button>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 问题描述 -->
        <view class="detail-card">
          <view class="section-title">
            <i class="fa fa-file-text-o"></i> 问题描述
          </view>
          <view class="section-content">
            {{ workorderDetail.des || '无描述信息' }}
          </view>
        </view>

        <!-- 处理记录：待处理状态不显示记录 -->
        <view class="detail-card" v-if="workorderDetail.status !== 0">
          <view class="section-title">
            <i class="fa fa-history"></i> 处理记录
          </view>
          <view class="process-record-list">
            <view class="process-record" v-for="(record, index) in processRecords" :key="index">
              <view class="record-time">{{ record.time }}</view>
              <view class="record-content">{{ record.content }}</view>
              <view class="record-operator">
                <i class="fa fa-user"></i> 操作员：{{ record.operator || '系统' }}
              </view>
              <view class="record-divider" v-if="index < processRecords.length - 1"></view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部按钮区域：待处理状态（修改/删除） -->
    <view 
      class="action-bar" 
      v-if="!isLoading && !errorMsg && workorderDetail.status === 0"
    >
      <button class="action-btn edit-btn" @click="gotoEditTicket">
        <i class="fa fa-pencil"></i> 修改工单
      </button>
      <button class="action-btn delete-btn" @click="showDeleteConfirm">
        <i class="fa fa-trash"></i> 删除工单
      </button>
    </view>

    <!-- 底部按钮区域：已处理状态（显示支付按钮） -->
    <view 
      class="action-bar single-btn" 
      v-if="!isLoading && !errorMsg && workorderDetail.status === 2"
    >
      <button 
        class="action-btn pay-btn" 
        @click="handlePay"
        :loading="isPayLoading"
      >
        <i class="fa fa-credit-card"></i> 立即支付 ¥{{ (payAmount || 0).toFixed(2) }}
      </button>
    </view>

    <!-- 底部按钮区域：已结算 + 未评价（去评价） -->
    <view 
      class="action-bar single-btn" 
      v-if="!isLoading && !errorMsg && workorderDetail.status === 3 && workorderDetail.feedbackStatus === 0"
    >
      <button class="action-btn evaluate-btn" @click="gotoEvaluate">
        <i class="fa fa-star"></i> 去评价
      </button>
    </view>

    <!-- 底部按钮区域：已结算 + 已评价（查看评价） -->
    <view 
      class="action-bar single-btn" 
      v-if="!isLoading && !errorMsg && workorderDetail.status === 3 && workorderDetail.feedbackStatus === 1"
    >
      <button class="action-btn evaluate-btn" @click="gotoViewFeedback">
        <i class="fa fa-eye"></i> 查看评价
      </button>
    </view>
  </view>
</template>

<script>
import request from '@/api/request.js';

export default {
  data() {
    return {
      imageBaseUrl: 'http://47.96.93.244:8084/', // 图片域名
      workorderId: '',
      workorderDetail: {},
      processRecords: [],
      isLoading: true,
      errorMsg: '',
      currentUserId: '',
      fromPage: '',
      resolvedAddress: '',
      // 支付相关状态
      isPayLoading: false,
      payAmount: 0,
      isCalculatingAmount: false,
      // 状态配置
      statusConfig: {
        0: { text: '待处理', class: 'status-pending' },
        1: { text: '处理中', class: 'status-processing' },
        2: { text: '已处理', class: 'status-handled' },
        3: { text: '已结算', class: 'status-settled' },
        4: { text: '待审核', class: 'status-pending-review' },
        5: { text: '已归档', class: 'status-archived' }
      },
      typeConfig: { 0: '客户自建', 1: '维修', 2: '安装', null: '未知类型' },
      urgencyConfig: {
        1: { text: '普通', class: 'urgency-ordinary' },
        2: { text: '紧急', class: 'urgency-urgent' },
        null: { text: '未知', class: 'urgency-unknown' }
      }
    };
  },

  onLoad(options) {
    this.fromPage = options.from || '列表页';
    this.workorderId = options.id;
    if (!this.workorderId) {
      this.errorMsg = '未获取到有效工单ID';
      this.isLoading = false;
      return;
    }
    const userInfo = uni.getStorageSync('userInfo') || {};
    this.currentUserId = userInfo.id || '';
    this.getWorkorderDetail();
    
    // 监听工单更新事件
    uni.$on('workorderUpdated', () => {
      this.getWorkorderDetail();
    });
  },

  onUnload() {
    uni.$off('workorderUpdated');
  },

  methods: {
    navigateBack() {
      uni.navigateBack({ delta: 1 });
    },

    // 获取工单详情
    getWorkorderDetail() {
      this.isLoading = true;
      uni.showLoading({ title: '加载详情中...' });
      request.post(
        `/api/workOrderInfo/get?id=${this.workorderId}`,
        {},
        true
      ).then(rawData => {
        uni.hideLoading();
        this.isLoading = false;
        this.workorderDetail = this.mapWorkorderData(rawData);
        this.generateProcessRecords();
        this.resolveAddress();
        
        // 如果是已处理状态，自动获取支付金额
        if (this.workorderDetail.status === 2) {
          this.getPaymentAmount();
        }
      }).catch(error => {
        uni.hideLoading();
        this.isLoading = false;
        this.errorMsg = error.msg || '获取工单详情失败';
        this.simulateData(); // 模拟数据用于调试
      });
    },

    // 映射工单数据
    mapWorkorderData(rawData) {
      return {
        id: rawData.id || '',
        title: rawData.title || '无标题工单',
        des: rawData.des || '无问题描述',
        name: rawData.name || '未知提交人',
        phone: rawData.phone || '',
        address: rawData.address || '未填写服务地址',
        longitude: rawData.longitude || '',
        latitude: rawData.latitude || '',
        createTime: this.formatTime(rawData.createTime),
        updateTime: this.formatTime(rawData.updateTime),
        status: rawData.status || null,
        type: rawData.type || null,
        priorityType: rawData.priorityType || 1,
        pic: rawData.pic || '',
        employeeName: rawData.employeeName || '未分配处理人',
        feedbackStatus: rawData.feedbackStatus || 0
      };
    },

    // 获取状态文本
    getStatusText(status) {
      return this.statusConfig[status]?.text || '未知状态';
    },

    // 获取状态样式
    getStatusClass(status) {
      return this.statusConfig[status]?.class || '';
    },

    // 获取类型文本
    getTypeText(type) {
      return this.typeConfig[type] || this.typeConfig[null];
    },

    // 获取紧急程度文本
    getUrgencyText(priorityType) {
      return this.urgencyConfig[priorityType]?.text || this.urgencyConfig[null].text;
    },

    // 获取紧急程度样式
    getUrgencyClass(priorityType) {
      return this.urgencyConfig[priorityType]?.class || this.urgencyConfig[null].class;
    },

    // 解析地址（百度地图逆地理编码）
    resolveAddress() {
      const { latitude, longitude } = this.workorderDetail;
      if (!latitude || !longitude || isNaN(Number(latitude)) || isNaN(Number(longitude))) return;
      const ak = '你的百度地图AK'; // 替换为实际AK
      uni.request({
        url: `https://api.map.baidu.com/reverse_geocoding/v3/?ak=${ak}&output=json&location=${latitude},${longitude}`,
        method: 'GET',
        success: (res) => {
          if (res.data?.status === 0 && res.data.result) {
            this.resolvedAddress = res.data.result.formatted_address;
          }
        }
      });
    },

    // 生成处理记录
    generateProcessRecords() {
      const { createTime, status, employeeName, updateTime } = this.workorderDetail;
      this.processRecords = [{ 
        time: createTime, 
        content: `工单创建，初始状态：${this.getStatusText(status)}`, 
        operator: '系统' 
      }];
      if (status === 1) {
        this.processRecords.push({
          time: updateTime, 
          content: '工单分配给处理人，开始处理', 
          operator: employeeName || '系统'
        });
      } else if (status === 2) {
        this.processRecords.push({
          time: updateTime, 
          content: '处理人完成工单处理，状态更新为已处理', 
          operator: employeeName || '系统'
        });
      } else if (status === 3) {
        this.processRecords.push({
          time: updateTime, 
          content: '工单完成结算，流程结束', 
          operator: employeeName || '系统'
        });
      }
    },

    // 跳转到修改页
    gotoEditTicket() {
      const { id, title, des, phone, name, longitude, latitude, type, priorityType, pic } = this.workorderDetail;
      const locationStr = `${latitude || ''},${longitude || ''}`;  
      const params = `id=${encodeURIComponent(id || '')}&title=${encodeURIComponent(title || '')}&des=${encodeURIComponent(des || '')}&phone=${encodeURIComponent(phone || '')}&name=${encodeURIComponent(name || '')}&address=${encodeURIComponent(locationStr || '')}&priorityType=${encodeURIComponent(priorityType || 1)}&pic=${encodeURIComponent(pic || '')}&isEdit=true`;
      uni.navigateTo({ url: `/pages/User/workorder/create?${params}` });
    },

    // 删除工单确认
    showDeleteConfirm() {
      if (!this.workorderDetail.id) return uni.showToast({ title: '工单ID无效', icon: 'none' });
      uni.showModal({
        title: '确认删除',
        content: '删除后不可恢复，是否继续？',
        confirmColor: '#ff4d4f',
        success: (res) => res.confirm && this.deleteWorkorder()
      });
    },

    // 执行删除工单
    deleteWorkorder() {
      uni.showLoading({ title: '删除中...' });
      request.post(
        `/api/workOrderInfo/deleteWithPic?id=${this.workorderDetail.id}`,
        {},
        true
      ).then(() => {
        uni.hideLoading();
        uni.showToast({ title: '删除成功', icon: 'success' });
        setTimeout(() => this.navigateBack(), 1000);
      }).catch(error => {
        uni.hideLoading();
        uni.showToast({ title: error.msg || '删除失败', icon: 'none' });
      });
    },

    // 跳转到评价页（未评价时）
    gotoEvaluate() {
      const { id, title, employeeName } = this.workorderDetail;
      uni.navigateTo({ 
        url: `/pages/User/workorder/rating?orderId=${encodeURIComponent(id || '')}&title=${encodeURIComponent(title || '无标题')}&employeeName=${encodeURIComponent(employeeName || '未知处理人')}`,
        success: (res) => {
          res.eventChannel.on('evaluateDone', () => {
            this.getWorkorderDetail(); // 评价后刷新详情
          });
        }
      });
    },

    // 跳转到评价详情页（已评价时）
    gotoViewFeedback() {
      uni.navigateTo({ url: `/pages/User/workorder/feedbackDetail?orderId=${this.workorderDetail.id}` });
    },

    // 预览图片
    previewImage(imageUrl) {
      if (imageUrl) uni.previewImage({ urls: [imageUrl], current: imageUrl });
    },

    // 格式化时间
    formatTime(timeData) {
      if (!timeData) return '未知时间';
      try {
        const date = new Date(typeof timeData === 'number' ? timeData : timeData.replace(/T/g, ' '));
        return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
      } catch (e) {
        return timeData.toString().substring(0, 16).replace('T', ' ') || '未知时间';
      }
    },

    // 模拟数据（调试用）
    simulateData() {
      const testStatus = 2; // 模拟已处理状态
      const testFeedbackStatus = 0;
      this.workorderDetail = {
        id: this.workorderId || 'SIM-20250922-001',
        title: '模拟工单（已处理）',
        des: '手机屏幕碎裂，无法显示',
        name: '测试用户',
        phone: '13800138006',
        address: '北京市朝阳区建国门外大街1号',
        longitude: '116.4678',
        latitude: '39.9042',
        createTime: this.formatTime(Date.now() - 7200000),
        updateTime: this.formatTime(Date.now() - 3600000),
        status: testStatus,
        type: 0,
        priorityType: 2,
        pic: 'group1/M00/00/00/rBjxQmjNAwaAREMKAAR0BUW2mqw327.jpg',
        employeeName: '测试处理人',
        feedbackStatus: testFeedbackStatus
      };
      this.generateProcessRecords();
      this.resolveAddress();
      
      // 模拟支付金额
      if (testStatus === 2) {
        this.payAmount = 99.00;
      }
    },
    
    // 获取支付金额
    getPaymentAmount() {
      if (!this.workorderDetail.id) return;
      
      this.isCalculatingAmount = true;
      request.post(
        '/api/payment/calculateAmount',
        { orderId: this.workorderDetail.id }, // 正确传递orderId参数
        true
      ).then(amount => {
        this.isCalculatingAmount = false;
        this.payAmount = amount;
      }).catch(error => {
        this.isCalculatingAmount = false;
        uni.showToast({ title: error.msg || '获取金额失败', icon: 'none' });
      });
    },
    
    // 处理支付
    async handlePay() {
      if (!this.workorderDetail.id) {
        return uni.showToast({ title: '工单ID无效', icon: 'none' });
      }

      this.isPayLoading = true;
      try {
        // 1. 确保已获取支付金额
        if (!this.payAmount) {
          await new Promise((resolve, reject) => {
            this.getPaymentAmount();
            // 轮询检查金额是否获取成功
            const checkAmount = setInterval(() => {
              if (this.payAmount || !this.isCalculatingAmount) {
                clearInterval(checkAmount);
                if (this.payAmount) {
                  resolve();
                } else {
                  reject(new Error('获取支付金额失败'));
                }
              }
            }, 300);
          });
        }

        // 2. 二次确认支付
        const confirmPay = await this.showPayConfirm();
        if (!confirmPay) {
          return;
        }

        // 3. 获取预支付参数
        const prepayData = await request.postJson(
          '/api/payment/process',
          { orderId: this.workorderDetail.id }, // JSON格式传递参数
          true
        );

        if (!prepayData || !prepayData.success) {
          throw new Error(prepayData?.msg || '获取支付信息失败');
        }

        // 4. 调用微信支付API
        const payResult = await uni.requestPayment({
          provider: 'wxpay',
          timeStamp: prepayData.timeStamp + '',
          nonceStr: prepayData.nonceStr,
          package: prepayData.package,
          signType: prepayData.signType || 'MD5',
          paySign: prepayData.paySign
        });

        // 5. 处理支付结果
        if (payResult.errMsg === 'requestPayment:ok') {
          // 支付成功后查询真实状态
          const statusResult = await request.get(
            '/api/payment/getPayStatus',
            { orderId: this.workorderDetail.id },
            true
          );
          
          if (statusResult === 1) {
            uni.showToast({ title: '支付成功', icon: 'success' });
            // 刷新工单详情
            setTimeout(() => {
              this.getWorkorderDetail();
              // 通知列表页刷新
              uni.$emit('workorderUpdated');
            }, 1000);
          } else {
            uni.showToast({ title: '支付结果确认中，请稍后查看', icon: 'none' });
          }
        } else {
          uni.showToast({ title: '支付已取消', icon: 'none' });
        }
      } catch (err) {
        console.error('支付失败:', err);
        uni.showToast({ title: err.message || '支付失败，请重试', icon: 'none' });
      } finally {
        this.isPayLoading = false;
      }
    },
    
    // 显示支付确认对话框
    showPayConfirm() {
      return new Promise((resolve) => {
        uni.showModal({
          title: '确认支付',
          content: `您需要支付 ${this.payAmount.toFixed(2)} 元`,
          confirmText: '确认支付',
          cancelText: '取消',
          confirmColor: '#165dff',
          success: (res) => {
            resolve(res.confirm);
          },
          fail: () => {
            resolve(false);
          }
        });
      });
    }
  }
};
</script>

<style scoped>
.detail-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f7fa;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.detail-header {
  height: 48px;
  background-color: #5555ff;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 15px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.header-back {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}
.header-back:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.header-back i {
  font-size: 20px;
}
.header-title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
}

.detail-content {
  flex: 1;
  padding: 15px;
  margin-top: 48px;
  margin-bottom: 65px;
}

.detail-card {
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s;
}
.detail-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.detail-title {
  font-size: 18px;
  font-weight: 600;
  color: #1d2129;
  margin-bottom: 12px;
  line-height: 1.4;
}
.title-status-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.detail-status, .detail-urgency {
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.detail-status i, .detail-urgency i {
  font-size: 12px;
}

.status-pending { background-color: #fff8e6; color: #ff9800; }
.status-processing { background-color: #e8f4fd; color: #1890ff; }
.status-handled { background-color: #f0fff4; color: #00b42a; }
.status-settled { background-color: #e1bee7; color: #6a1b9a; }

.urgency-ordinary { color: #86909c; background-color: #f2f3f5;}
.urgency-urgent { color: #f53f3f; background-color: #fff0f0; font-weight: 500;}

.section-title {
  font-size: 15px;
  color: #1d2129;
  font-weight: 500;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f2f3f5;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-title i {
  color: #165dff;
}

.image-container {
  margin-top: 5px;
  border-radius: 6px;
  overflow: hidden;
  background-color: #f7f8fa;
}
.workorder-image {
  width: 100%;
  height: auto;
  min-height: 180px;
  object-fit: cover;
  transition: transform 0.3s;
}
.workorder-image:hover {
  transform: scale(1.01);
}
.no-image {
  margin-top: 5px;
  padding: 40px 0;
  text-align: center;
  font-size: 14px;
  color: #86909c;
  background-color: #f7f8fa;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.no-image i {
  font-size: 24px;
  color: #c9cdD4;
}

.info-grid {
  margin-top: 5px;
}
.info-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.info-item {
  flex: 1;
  min-width: 50%;
  padding: 10px 0;
  display: flex;
}
.info-item.full-width {
  min-width: 100%;
}
.info-label {
  width: 85px;
  font-size: 14px;
  color: #86909c;
  flex-shrink: 0;
}
.info-value {
  flex: 1;
  font-size: 14px;
  color: #1d2129;
  word-break: break-all;
  line-height: 1.5;
}

/* 支付金额样式 */
.pay-amount {
  display: flex;
  align-items: center;
  color: #ff9800;
  font-weight: 500;
}
.refresh-amount-btn {
  background: transparent;
  border: none;
  padding: 2px 5px;
  margin-left: 8px;
  color: #165dff;
}

.section-content {
  font-size: 14px;
  color: #1d2129;
  line-height: 1.6;
  padding: 5px 0;
  white-space: pre-line;
}

.process-record-list {
  margin-top: 5px;
}
.process-record {
  padding: 12px 0;
}
.record-time {
  font-size: 12px;
  color: #86909c;
  margin-bottom: 6px;
}
.record-content {
  font-size: 14px;
  color: #1d2129;
  margin-bottom: 5px;
  line-height: 1.5;
}
.record-operator {
  font-size: 12px;
  color: #6b7785;
  display: flex;
  align-items: center;
  gap: 5px;
}
.record-divider {
  height: 1px;
  background-color: #f2f3f5;
  margin-top: 12px;
}

.action-bar {
  display: flex;
  gap: 12px;
  padding: 12px 15px;
  background-color: #fff;
  border-top: 1px solid #f2f3f5;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 65px;
  box-sizing: border-box;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.03);
}
.action-bar.single-btn {
  justify-content: center;
  padding: 12px 30px;
}
.action-btn {
  flex: 1;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  border-radius: 8px;
  border: none;
  color: #fff;
  font-weight: 500;
  transition: all 0.2s;
  cursor: pointer;
}
.action-btn:active {
  transform: scale(0.98);
}

.edit-btn {
  background-color: #165dff;
}
.edit-btn:hover {
  background-color: #0e4cca;
}
.delete-btn {
  background-color: #f53f3f;
}
.delete-btn:hover {
  background-color: #d4302e;
}
.evaluate-btn {
  background-color: #00b42a;
  width: 100%;
  max-width: 300px;
}
.evaluate-btn:hover {
  background-color: #00a824;
}
/* 支付按钮样式 */
.pay-btn {
  background-color: #ff9800;
  width: 100%;
  max-width: 300px;
}
.pay-btn:hover {
  background-color: #fa8900;
}
.pay-btn[loading] {
  opacity: 0.8;
}

.loading {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 48px;
  gap: 15px;
}
.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(22, 93, 255, 0.1);
  border-radius: 50%;
  border-top-color: #165dff;
  animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.loading-text {
  font-size: 15px;
  color: #86909c;
}

.error-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 48px;
  padding: 0 20px;
  text-align: center;
  gap: 15px;
}
.error-icon {
  font-size: 60px;
  color: #f53f3f;
}
.error-text {
  font-size: 15px;
  color: #1d2129;
  line-height: 1.5;
  max-width: 300px;
}
.retry-btn, .back-btn {
  min-width: 140px;
  height: 42px;
  font-size: 15px;
  border-radius: 6px;
  border: none;
  padding: 0 15px;
  font-weight: 500;
}
.retry-btn {
  background-color: #165dff;
  color: #fff;
}
.back-btn {
  background-color: #f2f3f5;
  color: #1d2129;
  margin-top: 5px;
}
</style>
